import React, { useState, useEffect, useRef } from 'react';
import {
    Terminal, Code, Cpu, Globe, Zap, Layout,
    Github, Twitter, Mail, ArrowUpRight,
    MessageSquare, ChevronRight, Coffee, Layers,
    ExternalLink, Hash
} from 'lucide-react';

// 自定义钩子：滚动监测
const useOnScreen = (ref: any, rootMargin = "0px") => {
    const [isIntersecting, setIntersecting] = useState(false);
    useEffect(() => {
        const observer = new IntersectionObserver(
            ([entry]) => setIntersecting(entry.isIntersecting),
            { rootMargin }
        );
        if (ref.current) observer.observe(ref.current);
        return () => { if (ref.current) observer.unobserve(ref.current); };
    }, [ref, rootMargin]);
    return isIntersecting;
};

// 组件：闪烁的故障文字效果
// @ts-ignore
const GlitchText = ({ text, className = "" }) => {
    return (
        <div className={`relative inline-block group ${className}`}>
            <span className="relative z-10">{text}</span>
            <span className="absolute top-0 left-0 -ml-0.5 translate-x-[2px] text-[#ccff00] opacity-0 group-hover:opacity-100 animate-pulse z-0 mix-blend-screen">
        {text}
      </span>
            <span className="absolute top-0 left-0 -ml-0.5 -translate-x-[2px] text-[#d946ef] opacity-0 group-hover:opacity-100 animate-pulse delay-75 z-0 mix-blend-screen">
        {text}
      </span>
        </div>
    );
};

// 组件：技能跑马灯
const SkillTicker = () => {
    const skills = [
        "REACT", "NODE.JS", "THREE.JS", "NEXT.JS", "TYPESCRIPT",
        "GRAPHQL", "RUST", "TAILWIND", "WEBGL", "PYTHON", "SOLIDITY"
    ];

    return (
        <div className="w-full bg-[#ccff00] text-black overflow-hidden py-3 border-y-2 border-white/10 rotate-[-1deg] scale-105 transform mb-20">
            <div className="flex whitespace-nowrap animate-marquee">
                {[...Array(4)].map((_, i) => (
                    <div key={i} className="flex items-center">
                        {skills.map((skill, idx) => (
                            <span key={idx} className="mx-8 text-2xl font-black italic tracking-tighter flex items-center">
                <Zap size={20} className="mr-2 fill-current" />
                                {skill}
              </span>
                        ))}
                    </div>
                ))}
            </div>
        </div>
    );
};

// 组件：博客文章卡片
// @ts-ignore
const BlogPost = ({ title, category, date, readTime, summary, index }) => {
    const ref = useRef();
    const onScreen = useOnScreen(ref, "-50px");

    // @ts-ignore
    return (
        <div
            // @ts-ignore
            ref={ref}
            className={`group relative bg-[#0a0a0a] border border-white/10 p-8 transition-all duration-500 hover:border-[#ccff00] hover:-translate-y-2
      ${onScreen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}
            style={{ transitionDelay: `${index * 100}ms` }}
        >
            <div className="absolute -top-3 -right-3 w-12 h-12 bg-[#d946ef]/20 rounded-full blur-xl group-hover:bg-[#d946ef]/40 transition-all duration-500"></div>

            <div className="flex justify-between items-center mb-4 text-xs font-mono text-gray-400">
                <div className="flex items-center gap-2">
                    <Hash size={12} className="text-[#ccff00]" />
                    <span className="text-[#ccff00]">{category}</span>
                </div>
                <span>{date} • {readTime}</span>
            </div>

            <h3 className="text-2xl font-bold text-white mb-4 group-hover:text-[#ccff00] transition-colors leading-tight">
                {title}
            </h3>

            <p className="text-gray-400 mb-6 line-clamp-3 font-mono text-sm leading-relaxed">
                {summary}
            </p>

            <div className="flex items-center text-white font-bold text-sm group-hover:gap-4 gap-2 transition-all duration-300">
                READ ARTICLE <ArrowUpRight size={16} className="text-[#d946ef]" />
            </div>

            {/* 装饰角标 */}
            <div className="absolute top-0 left-0 w-2 h-2 border-t border-l border-white/50"></div>
            <div className="absolute bottom-0 right-0 w-2 h-2 border-b border-r border-white/50 group-hover:border-[#ccff00] transition-colors"></div>
        </div>
    );
};

// 组件：项目卡片
// @ts-ignore
const ProjectCard = ({ title, desc, stack, color, index }) => {
    const ref = useRef();
    const onScreen = useOnScreen(ref, "-50px");

    return (
        <div
            // @ts-ignore
            ref={ref}
            className={`relative overflow-hidden rounded-xl bg-neutral-900/50 border border-white/5 aspect-[4/3] group
      ${onScreen ? 'opacity-100 scale-100' : 'opacity-0 scale-95'}`}
            style={{ transitionDelay: `${index * 150}ms` }}
        >
            <div className={`absolute inset-0 bg-gradient-to-br ${color} opacity-0 group-hover:opacity-10 transition-opacity duration-500`}></div>

            <div className="absolute inset-0 p-8 flex flex-col justify-between z-10">
                <div className="flex justify-between items-start">
                    <div className="p-3 rounded-lg bg-white/5 backdrop-blur-sm border border-white/10">
                        <Code size={24} className="text-white" />
                    </div>
                    <ExternalLink size={24} className="text-gray-500 group-hover:text-white transition-colors cursor-pointer" />
                </div>

                <div>
                    <h3 className="text-3xl font-black text-white mb-2 uppercase tracking-tighter translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
                        {title}
                    </h3>
                    <p className="text-gray-400 font-mono text-sm mb-4 opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100">
                        {desc}
                    </p>
                    <div className="flex gap-2 flex-wrap">
                        {stack.map((s: any, i: any) => (
                            <span key={i} className="text-[10px] px-2 py-1 bg-white/10 text-[#ccff00] rounded border border-[#ccff00]/20">
                {s}
              </span>
                        ))}
                    </div>
                </div>
            </div>

            {/* 悬停时的网格背景 */}
            <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 mix-blend-overlay pointer-events-none"></div>
        </div>
    );
};

export default function AvantGardeBlog() {
    const [scrolled, setScrolled] = useState(false);
    const [mousePos, setMousePos] = useState({ x: 0, y: 0 });

    // 鼠标移动效果
    useEffect(() => {
        const handleScroll = () => setScrolled(window.scrollY > 50);
        const handleMouseMove = (e: any) => setMousePos({ x: e.clientX, y: e.clientY });

        window.addEventListener('scroll', handleScroll);
        window.addEventListener('mousemove', handleMouseMove);
        return () => {
            window.removeEventListener('scroll', handleScroll);
            window.removeEventListener('mousemove', handleMouseMove);
        };
    }, []);

    // @ts-ignore
    return (
        <div className="min-h-screen bg-[#050505] text-gray-200 font-sans selection:bg-[#d946ef] selection:text-white overflow-x-hidden">

            {/* 背景光晕跟随 */}
            <div
                className="fixed w-[600px] h-[600px] bg-[#d946ef]/10 rounded-full blur-[100px] pointer-events-none z-0 mix-blend-screen transition-transform duration-100 ease-out"
                style={{
                    left: mousePos.x - 300,
                    top: mousePos.y - 300,
                }}
            ></div>

            {/* 导航栏 */}
            <nav className={`fixed top-0 w-full z-50 transition-all duration-300 border-b ${scrolled ? 'bg-[#050505]/80 backdrop-blur-md border-white/10 py-4' : 'bg-transparent border-transparent py-8'}`}>
                <div className="container mx-auto px-6 flex justify-between items-center">
                    <div className="text-2xl font-black tracking-tighter text-white flex items-center gap-2">
                        <span className="text-[#ccff00]">{`{`}</span>
                        <GlitchText text="NEO.LOG" />
                        <span className="text-[#ccff00]">{`}`}</span>
                    </div>

                    <div className="hidden md:flex items-center gap-8 font-mono text-sm">
                        {['PROJECTS', 'THOUGHTS', 'STACK', 'ABOUT'].map((item) => (
                            <a key={item} href={`#${item.toLowerCase()}`} className="hover:text-[#ccff00] transition-colors relative group">
                                <span className="text-[#d946ef] mr-1 opacity-0 group-hover:opacity-100 transition-opacity">/</span>
                                {item}
                            </a>
                        ))}
                        <button className="bg-white text-black px-4 py-2 font-bold hover:bg-[#ccff00] transition-colors flex items-center gap-2">
                            <Mail size={16} />
                            LET'S TALK
                        </button>
                    </div>
                </div>
            </nav>

            {/* Hero Section */}
            <header className="relative min-h-screen flex items-center pt-20 z-10">
                <div className="container mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
                    <div>
                        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-[#ccff00]/30 bg-[#ccff00]/5 text-[#ccff00] text-xs font-mono mb-8 animate-pulse">
                            <span className="w-2 h-2 rounded-full bg-[#ccff00]"></span>
                            AVAILABLE FOR FREELANCE
                        </div>

                        <h1 className="text-6xl md:text-8xl font-black text-white leading-[0.9] mb-8 tracking-tighter">
                            CODE <br/>
                            <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#ccff00] to-emerald-500">IS POETRY</span> <br/>
                            IN LOGIC.
                        </h1>

                        <p className="text-xl text-gray-400 max-w-lg mb-10 font-mono leading-relaxed border-l-2 border-[#d946ef] pl-6">
                            Building digital experiences that blend aesthetic chaos with structured logic. Full-stack developer obsessed with performance and motion.
                        </p>

                        <div className="flex gap-4">
                            <button className="px-8 py-4 bg-[#ccff00] text-black font-black hover:bg-white transition-colors flex items-center gap-2 group">
                                VIEW PROJECTS
                                <ChevronRight className="group-hover:translate-x-1 transition-transform" />
                            </button>
                            <button className="px-8 py-4 border border-white/20 text-white font-mono hover:border-[#d946ef] hover:text-[#d946ef] transition-colors">
                                READ DOCS
                            </button>
                        </div>
                    </div>

                    {/* 抽象代码展示区 */}
                    <div className="relative hidden md:block">
                        <div className="relative z-10 bg-black/80 border border-white/10 backdrop-blur-xl p-6 rounded-xl shadow-2xl transform rotate-3 hover:rotate-0 transition-transform duration-500">
                            <div className="flex items-center gap-2 mb-4 border-b border-white/5 pb-4">
                                <div className="w-3 h-3 rounded-full bg-red-500"></div>
                                <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
                                <div className="w-3 h-3 rounded-full bg-green-500"></div>
                                <span className="ml-2 font-mono text-xs text-gray-500">developer.tsx</span>
                            </div>
                            <div className="font-mono text-sm space-y-2">
                                <div className="flex">
                                    <span className="text-[#d946ef] w-8">1</span>
                                    <span className="text-[#ccff00]">const</span>
                                    <span className="text-white mx-2">createExperience</span>
                                    <span className="text-gray-400">=</span>
                                    <span className="text-blue-400 mx-2">async</span>
                                    <span className="text-yellow-400">()</span>
                                    <span className="text-gray-400 mx-2">{`=>`}</span>
                                    <span className="text-yellow-400">{`{`}</span>
                                </div>
                                <div className="flex">
                                    <span className="text-[#d946ef] w-8">2</span>
                                    <span className="ml-4 text-[#ccff00]">await</span>
                                    <span className="text-white mx-2">design.</span>
                                    <span className="text-blue-400">breakRules</span>
                                    <span className="text-gray-400">();</span>
                                </div>
                                <div className="flex">
                                    <span className="text-[#d946ef] w-8">3</span>
                                    <span className="ml-4 text-[#ccff00]">return</span>
                                    <span className="text-white mx-2">new</span>
                                    <span className="text-emerald-400 mx-2">Future</span>
                                    <span className="text-gray-400">({`{`}</span>
                                </div>
                                <div className="flex">
                                    <span className="text-[#d946ef] w-8">4</span>
                                    <span className="ml-8 text-white">bold:</span>
                                    <span className="text-purple-400 mx-2">true,</span>
                                </div>
                                <div className="flex">
                                    <span className="text-[#d946ef] w-8">5</span>
                                    <span className="ml-8 text-white">elegant:</span>
                                    <span className="text-purple-400 mx-2">true</span>
                                </div>
                                <div className="flex">
                                    <span className="text-[#d946ef] w-8">6</span>
                                    <span className="ml-4 text-gray-400">{`}`});</span>
                                </div>
                                <div className="flex">
                                    <span className="text-[#d946ef] w-8">7</span>
                                    <span className="text-yellow-400">{`}`}</span>
                                    <span className="animate-pulse ml-1 w-2 h-4 bg-[#ccff00] inline-block align-middle"></span>
                                </div>
                            </div>
                        </div>

                        {/* 装饰性背景元素 */}
                        <div className="absolute -top-10 -right-10 w-40 h-40 bg-[#ccff00] rounded-full mix-blend-difference blur-2xl opacity-50 animate-bounce"></div>
                        <div className="absolute -bottom-10 -left-10 w-60 h-60 bg-[#d946ef] rounded-full mix-blend-multiply blur-3xl opacity-30"></div>
                    </div>
                </div>
            </header>

            <SkillTicker />

            {/* Selected Work */}
            <section id="projects" className="py-32 container mx-auto px-6 relative z-10">
                <div className="flex items-end justify-between mb-16 border-b border-white/10 pb-6">
                    <div>
                        <h2 className="text-4xl md:text-5xl font-black text-white mb-2">SELECTED WORK</h2>
                        <p className="text-[#d946ef] font-mono text-sm">/// FEATURED CASE STUDIES</p>
                    </div>
                    <div className="hidden md:block text-right font-mono text-xs text-gray-500">
                        SCROLL TO EXPLORE <br/>
                        [↓↓↓]
                    </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <ProjectCard
                        index={1}
                        title="Hyper.Finance"
                        desc="A decentralized trading dashboard with real-time WebGL data visualization and zero-latency updates."
                        stack={["React", "Three.js", "Solidity"]}
                        color="from-[#ccff00] to-emerald-500"
                    />
                    <ProjectCard
                        index={2}
                        title="Neonverse API"
                        desc="High-performance backend infrastructure serving millions of requests for a cyberpunk MMO."
                        stack={["Rust", "GraphQL", "AWS"]}
                        color="from-[#d946ef] to-purple-600"
                    />
                    <ProjectCard
                        index={3}
                        title="Glitch.OS"
                        desc="Browser-based operating system concept with full file system emulation."
                        stack={["TypeScript", "WASM", "Vite"]}
                        color="from-blue-500 to-cyan-400"
                    />
                    <ProjectCard
                        index={4}
                        title="TypeMaster"
                        desc="AI-powered code completion tool for specialized hardware languages."
                        stack={["Python", "TensorFlow", "Next.js"]}
                        color="from-orange-500 to-red-500"
                    />
                </div>
            </section>

            {/* Thoughts / Blog */}
            <section id="thoughts" className="py-32 bg-[#080808] relative">
                {/* 网格背景 */}
                <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>

                <div className="container mx-auto px-6 relative z-10">
                    <div className="flex flex-col md:flex-row gap-16">
                        <div className="md:w-1/3 sticky top-32 h-fit">
                            <h2 className="text-7xl font-black text-white mb-6 tracking-tighter">
                                THOUGHTS <br/>
                                <span className="text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-800">& LOGS</span>
                            </h2>
                            <p className="text-gray-400 font-mono mb-8">
                                Documenting the journey through spaghetti code, system architecture, and the occasional existential crisis.
                            </p>
                            <button className="group flex items-center gap-3 text-[#ccff00] font-bold tracking-widest hover:gap-6 transition-all">
                                VIEW ARCHIVE <ArrowUpRight />
                            </button>
                        </div>

                        <div className="md:w-2/3 grid gap-6">
                            <BlogPost
                                index={0}
                                title="Rethinking State Management in 2025"
                                category="ARCHITECTURE"
                                date="NOV 20, 2025"
                                readTime="5 MIN READ"
                                summary="Why we might be overcomplicating our stores. A look into atomic state patterns and why less is often more when dealing with reactivity."
                            />
                            <BlogPost
                                index={1}
                                title="The Aesthetics of Brutalist Web Design"
                                category="DESIGN"
                                date="NOV 15, 2025"
                                readTime="8 MIN READ"
                                summary="Breaking down the resurgence of bold typography, high contrast, and raw layouts. How to implement 'ugly' design elegantly."
                            />
                            <BlogPost
                                index={2}
                                title="WebGL Performance: A Deep Dive"
                                category="GRAPHICS"
                                date="NOV 02, 2025"
                                readTime="12 MIN READ"
                                summary="Optimizing shaders and geometry instancing for 60fps experiences on mobile devices. Lessons learned from the Neon project."
                            />
                        </div>
                    </div>
                </div>
            </section>

            {/* Footer / Contact */}
            <footer className="bg-[#ccff00] text-black pt-20 pb-10 relative overflow-hidden">
                <div className="container mx-auto px-6 relative z-10">
                    <div className="grid md:grid-cols-2 gap-12 items-center mb-20">
                        <div>
                            <h2 className="text-6xl md:text-8xl font-black mb-8 tracking-tighter leading-none">
                                LET'S BUILD <br/> THE FUTURE.
                            </h2>
                            <p className="text-xl font-medium opacity-80 max-w-md mb-8">
                                Have a project in mind? Let's combine code and chaos to create something unforgettable.
                            </p>
                            <a href="mailto:hello@example.com" className="inline-block px-8 py-4 bg-black text-[#ccff00] font-bold text-xl hover:scale-105 transition-transform">
                                hello@neolog.dev
                            </a>
                        </div>

                        <div className="grid grid-cols-2 gap-4 font-mono text-sm">
                            {[
                                { icon: Github, label: "GITHUB", link: "#" },
                                { icon: Twitter, label: "TWITTER", link: "#" },
                                { icon: Layers, label: "LINKEDIN", link: "#" },
                                { icon: Coffee, label: "BUY ME A COFFEE", link: "#" }
                            ].map((social, i) => (
                                <a key={i} href={social.link} className="flex items-center gap-4 p-6 border border-black/10 hover:bg-black hover:text-[#ccff00] transition-colors group">
                                    <social.icon size={24} />
                                    <span className="font-bold">{social.label}</span>
                                    <ArrowUpRight className="ml-auto opacity-0 group-hover:opacity-100 transition-opacity" size={16} />
                                </a>
                            ))}
                        </div>
                    </div>

                    <div className="border-t border-black/10 pt-8 flex flex-col md:flex-row justify-between items-center font-mono text-xs">
                        <p>&copy; 2025 NEO.LOG / DESIGNED BY AI</p>
                        <div className="flex gap-8 mt-4 md:mt-0">
                            <span>IMPRESSUM</span>
                            <span>PRIVACY</span>
                            <span>SYSTEM STATUS: <span className="text-green-600 font-bold">ONLINE</span></span>
                        </div>
                    </div>
                </div>

                {/* 底部大背景字 */}
                <div className="absolute -bottom-10 left-0 w-full text-[20vw] font-black leading-none text-black/5 pointer-events-none select-none text-center">
                    DEVELOPER
                </div>
            </footer>
             {/*@ts-ignore*/}
            <style jsx global>{`
        @keyframes marquee {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        .animate-marquee {
          animation: marquee 20s linear infinite;
        }
        /* 自定义滚动条 */
        ::-webkit-scrollbar {
          width: 8px;
        }
        ::-webkit-scrollbar-track {
          background: #050505; 
        }
        ::-webkit-scrollbar-thumb {
          background: #333; 
          border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
          background: #ccff00; 
        }
      `}</style>
        </div>
    );
}